<!-- 评价 -->
<template>
	<view class="pageContent">
		<u-navbar title="活动评价" :autoBack="true" leftIconSize="16"
							@leftClick="leftClick" :titleStyle="{color:'#303133',fontSize:'32rpx'}"></u-navbar>
		<view class="status_bar"></view>
		<view class="status_bar_space"></view>
		
			<u--form :model="form" ref="form1" class="pageContent">
				<view class="line line_underline">请您对“{{peName}}活动”进行评价</view>
				<view class="line">满意度：</view>
				<view class="line line_underline">
					<u-rate size="20" :touchable="true" v-model="rateValue"></u-rate>
				</view>
				<view class="line">评价：</view>
				<view class="line">
					<u--textarea placeholder="填写评价" v-model="remark"></u--textarea>
				</view>
				<view class="spaceView"></view>
				<view class="buttonView">
					<view class="btnBig btnStyle" @click="submit()">提交评价</view>
				</view>
			</u--form>
			<u-tabbar :value="bottomTab" @change="name => bottomTab=name" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
				<u-tabbar-item text="活动列表" icon="list" @click="gotoActi()"></u-tabbar-item>
				<u-tabbar-item text="我的活动" icon="list-dot" @click="gotoMyActi()"></u-tabbar-item>
				<u-tabbar-item text="我创建的" icon="man-add-fill" @click="gotoMyActi_M()"></u-tabbar-item>
			</u-tabbar>
	</view>
</template>

<script>
	import utils from "@/utils/business/services.js";
	export default {
		data() {
			return {
				bottomTab: undefined, //底部链接tabbar高亮控制
				isActiadmin:false, //是否是活动管理员（可以发起与参与活动），底部链接tabbar显示控制
				
				//页面传参
				peName:"", //活动名称
				pePlayerId:"", //参与评价人的id
				
				rateValue:3, //评分
				remark:"", //评价
			}
		},
		onLoad(option) {
			this.isActiadmin=getApp().globalData.isActiadmin;
			console.log("活动明细面用于底部显示控制的变量isActiadmin==",this.isActiadmin);
			
			console.log("参数option==",option);
			if(JSON.stringify(option)!="{}"){
				this.peName=option.peName;
				this.pePlayerId=option.pePlayerId;
			}
			console.log("参数活动名称与参与评价人id==",this.peName,this.pePlayerId);
		},
		methods: {
			//顶部导航回退箭头点击触发
			leftClick(){
				uni.navigateBack();
			},
			submit(){
				let that=this;
				uni.showModal({
					title: '提示',
					content: '确定提交评价吗？',
					success: function(res) {
						if (res.confirm) {
							//执行确认后的操作
							let obj={};
							obj.pePlayerId=that.pePlayerId;
							if(that.rateValue==1){
								obj.assess="1星";
							}
							if(that.rateValue==2){
								obj.assess="2星";
							}
							if(that.rateValue==3){
								obj.assess="3星";
							}
							if(that.rateValue==4){
								obj.assess="4星好评";
							}
							if(that.rateValue==5){
								obj.assess="5星好评";
							}
							console.log("评价接口参数==",obj)
							utils.assess(obj).then(res => {
								console.log('活动评价接口的返回值==',res); 
								//debugger;
								if(res.data.code==200){
									uni.navigateTo({
										url:"./myActi" ,
									});
								}
								if(res.data.code==500){
									let msg=res.data.msg;
									uni.navigateTo({
										url:'../error/error?errorMsg='+msg 
									})
								}
							}).catch(error => {
								uni.navigateTo({
									url:'../error/error?errorMsg='+error
								})
							})
						} 
						else {
							//执行取消后的操作
						}
					}
				})
				//uni.showModal结束
			},
			
			gotoActi(){ //所有的可报名的活动
				uni.navigateTo({
					url:"./acti" ,
				});
			},
			gotoMyActi(){ //我报名参与的活动（含未开始的已结束的所有活动）
				uni.navigateTo({
					url:"./myActi" ,
				});
			},
			gotoMyActi_M() { //我创建的活动列表
				uni.navigateTo({
					url:"../acti_M/myActi_M" , 
				});
			},
			//在此上方补充函数
			//在此之上补充方法
		},
	}
</script>

<style lang="scss">
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		flex-shrink: 0;
	}
	.status_bar_space {
		height: 130rpx;
		width: 100%;
		flex-shrink: 0;
	}
	
	.pageContent{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		background-color: #F8F8F8;
	}
	.line{ 
		width: 720rpx;
		height: 80rpx;
		color: #82848a;
		font-size: 35rpx;  
		text-align: left;
		font-family: MicrosoftYaHei;
		line-height: 80rpx;
		border-radius: 10rpx;
		margin-top: 10rpx;
	}
	.line_underline{ /*带有下划线的行*/
		// border-bottom: 1px solid #c8c9cc; 
	}
	
	.spaceView{
		width:720rpx;
		height: 418rpx;
	}
	.buttonView{ 
		width: 700rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
	}
	.btnStyle{
		color: #FFFFFF;
		font-size: 36rpx;  
		font-family: MicrosoftYaHei;
		font-weight: bolder;
		text-align: center;
		line-height: 80rpx;
		border: 1px solid #FFFFFF;
		border-radius: 20rpx;
		background-color: #7F83F7;
	}
	.btnBig{
		width: 600rpx;
		height: 80rpx;
	}
	.btnSmall{
		width: 250rpx;
		height: 80rpx;
	}
	
</style>